<template>
  <view class="grace-loading grace-ellipsis" v-if="loadingType < 4">
    <view
      class="grace-loading-icon ali-icon"
      v-if="loadingType === 1"
      :style="{ color: iconColor }"
      >&#xe693;</view
    >
    <text class="grace-loading-text" :style="{ color: textColor }">{{
      loadingText[loadingType]
    }}</text>
  </view>
</template>

<script lang="ts" setup>
import { propTypes } from "@/utils/propTypes";

defineProps({
  loadingType: propTypes.number.def(0),
  loadingText: propTypes.array.def(["上拉加载更多", "正在努力加载", "已经加载全部数据"]),
  iconColor: propTypes.string.def("#888888"),
  textColor: propTypes.string.def("#888888"),
});
</script>

<style lang="scss" scoped>
@keyframes grace-rotate360 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.grace-loading {
  display: flex;
  width: 100%;
  height: 100rpx;
  align-items: center;
  justify-content: center;
  // padding: 16rpx 0;
  // padding-bottom: 36rpx;
  // line-height: 40rpx;
  color: #888;
}
.grace-loading-text {
  margin-left: 12rpx;
}
.grace-loading-icon {
  width: 40rpx;
  height: 40rpx;
  justify-content: center;
  line-height: 40rpx;
  font-size: 30rpx;
  text-align: center;
  font-family: "grace-iconfont";
  animation: grace-rotate360 1200ms infinite linear;
}
</style>
